import React from 'react';
import { Grid, Badge, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import styles from './HomeGrid.less';


function HomeGrid({ dispatch, items, shopId }) {
  const size = { width: '0.7rem', height: '0.7rem' };
  const data = [
    {
      icon: <Badge text={items[0].length || null}><img
        style={size}
        alt="" src={require('../../assets/1.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '新客转化',
      href: '/p1',
      data: items[0],
      type: 0,
    },
    {
      icon: <Badge text={items[8].length || null}><img
        style={size}
        alt="" src={require('../../assets/2.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '新客回头',
      href: '/p1',
      data: items[8],
      type: 8,
    },
    {
      icon: <Badge text={items[9].length || null}><img
        style={size}
        alt="" src={require('../../assets/3.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '新客转惯',
      href: '/p1',
      data: items[9],
      type: 9,
    },
    {
      icon: <Badge text={items[10].length || null}><img
        style={size}
        alt="" src={require('../../assets/11.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '老客复购',
      href: '/p1',
      data: items[10],
      type: 10,
    },
    {
      icon: <Badge text={items[3].length || null}><img
        style={size}
        alt="" src={require('../../assets/6.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '沉睡唤醒',
      href: '/p1',
      data: items[3],
      type: 3,
    },
    {
      icon: <Badge text={items[4].length || null}>
        <img
          style={size}
          alt="" src={require('../../assets/4.png')} className="am-icon am-icon-md"
        /></Badge>,
      text: '流失挽回',
      href: '/p1',
      data: items[4],
      type: 4,
    },
    {
      icon: <Badge text={(items[6].length + items[7].length) || null}>
        <img
          style={size}
          alt="" src={require('../../assets/7.png')} className="am-icon am-icon-md"
        /></Badge>,
      text: '升阶升码',
      href: '/p50',
      data: _.concat(items[6], items[7]),
      type: 6,
    },
    {
      icon: <Badge text={items[5].length || null}><img
        style={size}
        alt="" src={require('../../assets/5.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '成长关怀',
      href: '/p6',
      data: items[5],
      type: 5,
    },
    {
      icon: <Badge text={items[11].length || null}><img
        style={size}
        alt="" src={require('../../assets/10.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '积分提醒',
      href: '/p1',
      data: items[11],
      type: 11,
    },
    /* {
      icon: <Badge text={items[1].length || null}><img
        style={size}
        alt="" src={require('../../assets/9.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '销售管理',
      href: '/p1',
      data: items[1],
      type: 1,
      img: '/assets/9.png',
    },*/
    {
      icon: <Badge text={items[101] ? items[101].length : null}><img
        style={size}
        alt="" src={require('../../assets/101.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '定制任务',
      href: '/p101',
      data: items[101] || [],
      type: 101,
      img: '/assets/101.png',
    },
    {
      icon: <Badge text={items[12] ? items[12].length : null}><img
        style={size}
        alt="" src={require('../../assets/12.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '疫苗提醒',
      href: '/p12',
      data: items[12] || [],
      type: 12,
      img: '/assets/101.png',
    },
    {
      icon: <Badge text={items[13] ? items[13].length : null}><img
        style={size}
        alt="" src={require('../../assets/13.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '奶粉提醒',
      href: '/p1',
      data: items[13] || [],
      type: 13,
      img: '/assets/101.png',
    },
    {
      icon: <Badge text={items[14] ? items[14].length : null}><img
        style={size}
        alt="" src={require('../../assets/14.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '纸尿裤提醒',
      href: '/p1',
      data: items[14] || [],
      type: 14,
      img: '/assets/101.png',
    },
    {
      icon: <Badge text={items[15] ? items[15].length : null}><img
        style={size}
        alt="" src={require('../../assets/1-15.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '老客关怀',
      href: '/p1',
      data: items[15] || [],
      type: 15,
    },
    {
      icon: <Badge text={items[16] ? items[16].length : null}><img
        style={size}
        alt="" src={require('../../assets/1-16.png')}
        className="am-icon am-icon-md"
      /></Badge>,
      text: '入会关怀',
      href: '/p1',
      data: items[16] || [],
      type: 16,
    },
  ];
  return (
    <div>
      <Grid
        className="qez-grid"
        data={data} columnNum={5} hasLine={false}
        /* renderItem={(item) => {
         return (
         <div>

         </div>
         );
         }}*/
        onClick={(item) => {
          dispatch(routerRedux.push({
            pathname: item.href,
            query: {
              taskType: item.type,
              total: item.data.length,
              title: item.text,
            },
          }));
        }}
      />
    </div>
  );
}

export default connect((state) => {
  return {
    shopId: state.auth.currentUser.shopId,
  };
})(HomeGrid);
